<template>
  <div>
    <div class="all">
      <p class="result">本次考试分数</p>
      <p class="number">{{score}}</p>
      <p class="right">正确率</p>
      <p class="p">{{score}}%</p>
      <p class="check" @click="toWrongTest">查看错题</p>
      <div class="home_icon" @click="toPractice">
        <van-icon name="thumb-circle-o" />
        <div class="backtohome">重做练习</div>
      </div>
      <div class="home_icon" @click="toPractiseList">
        <van-icon name="edit" />
        <div class="backtohome">继续做题</div>
      </div>
      <div class="home_icon" @click="toBand">
        <van-icon name="apps-o" />
        <div class="backtohome">返回主页</div>
      </div>


    </div>
  </div>

</template>
<style >
  page{
    background-image: url("../../../static/images/practice.png");
    width: 100%;
    height: 100%;
    position: fixed;
    background-position: initial;
    background-size: cover;
    backgroundRepeat: no-repeat;

  }
  .number{
    font-size: 70rpx;
    font-weight: bold;
    color: white;
    margin-top: 20rpx;
  }
  .p{
    font-size: 40rpx;
    font-weight: bold;
    margin-top: 20rpx;
    color: white;
    line-height: 100rpx;
  }
  .right{
    font-size: 40rpx;
    font-weight: bold;
    margin-top: 30rpx;
    color: white;
    line-height: 100rpx;
  }
  .all{
    display: flex !important;
    flex-direction: column ;
    align-items: center !important;
  }
  /*.img{*/
  /*  height: 100%;*/
  /*  width: 100%;*/
  /*  position: fixed;*/
  /*}*/
  .result{
    font-size: 60rpx;
    font-weight: bold;
    color: white;
  }
  .check{
    background-color: #fffeff !important;
    margin-top: 90rpx;
    font-size: 50rpx;
    line-height: 60rpx;
    width: 300rpx;
    border:1rpx solid #eee;
    color: #949494;
    line-height: 80rpx;
    text-align: center;
    border-radius: 30rpx;
  }
  .backtoexam{
    background-color: #7aa7ba !important;
    margin-top: 220rpx;
    font-size: 50rpx;
    line-height: 100rpx;
    width: 300rpx;
    border:1rpx solid #eee;
    color: #fffeff;
    line-height: 80rpx;
    text-align: center;
    border-radius: 30rpx;
  }
  .newexam{
    background-color: #7aa7ba !important;
    margin-top: 100rpx;
    font-size: 50rpx;
    line-height: 100rpx;
    width: 300rpx;
    border:1rpx solid #eee;
    color: #fffeff;
    line-height: 80rpx;
    text-align: center;
    border-radius: 30rpx;
  }
  .home_icon{
    font-size: 100rpx;
    margin-top: 100rpx;
    display: flex;
    line-height: 80rpx;
    text-align: center;
    line-height: 100rpx;
  }
  .backtohome{
    margin-left: 20rpx;
    background-color: #eea9bb !important;
    font-size: 50rpx;
    width: 300rpx;
    border:1rpx solid #eee;
    color: #fffeff;
    border-radius: 30rpx;
  }
</style>
<script>
  import { mapState } from 'vuex'
  export default {
    name: 'Practiceresult',
    computed: {
      ...mapState(['score'])
    },
    methods: {
      toPractiseList () {
        wx.redirectTo({url: '../practiseList/main'})
      },
      toBand () {
        wx.switchTab({url: '../band/main'})
      },
      toWrongTest () {
        wx.navigateTo({url: '../practiseDetail/main'})
      },
      toPractice () {
        wx.redirectTo({url: '../exercise/main'})
      }
    }
  }
</script>

